<template>
  <div class="fwzx">
    <div class="header space-between align-center w100">
      <div class="flex align-center">
        <img :src="imgUrl + '/profile/personinfo/2023/6/20/lang3_f8f39a01722849fbb749aefb25d9c755.png'" class="img" />
        <div class="name">服务中心</div>
      </div>
      <img
        v-show="show"
        @click="handleClick"
        :src="imgUrl + '/profile/personinfo/2023/6/20/lang2_d966d366dae5476a8e6889b30b1b8c82.png'"
        class="img1"
      />
    </div>
    <div class="box w100">
      <div class="list flex w100">
        <div class="date">日期</div>
        <div class="headline">标题</div>
        <div class="but">操作</div>
      </div>
      <div class="notice-list">
        <div class="ul flex w100" v-for="item in noticeList" :key="item.id">
          <div class="date">{{ item.createTime }}</div>
          <div class="headline">{{ item.noticeTitle }}</div>
          <div class="examine" @click="handleInfo(item.noticeContent)">查看</div>
        </div>
      </div>
    </div>
    <img
      :src="imgUrl + '/profile/personinfo/2023/6/20/lang11_658ac4ffd989403f90b83d28a8177446.png'"
      class="img2 w100"
    />
    <help-dialog title="服务动态" :visible.sync="dialogVisible" append-to-body>
      <editor v-model="noticeContent" read-only :min-height="192" />
    </help-dialog>
  </div>
</template>

<script>
import agricultureApi from '@/api/agriculture'

export default {
  name: 'Fwzx',
  dicts: ['sys_notice_status'],
  props: {
    info: {
      type: Object,
      default: () => {}
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      imgUrl: process.env.VUE_APP_IMG_API,
      noticeList: [],
      dialogVisible: false,
      noticeContent: ''
    }
  },
  created() {
    this.getNoticeList()
  },
  methods: {
    getNoticeList() {
      agricultureApi.listNotice().then((res) => {
        this.noticeList = res.rows
      })
    },
    handleInfo(noticeContent) {
      this.noticeContent = noticeContent
      this.dialogVisible = true
    },
    handleClick() {
      this.$emit('onClick')
    }
  }
}
</script>

<style lang="scss" scoped>
.fwzx {
  //height: 4.16rem;
  height: calc((100vh - 1.2rem) / 3);

  .header {
    background-size: 100% 100%;
    font-size: 0.18rem;
    height: 0.42rem;
    background-image: url('https://emindt-scheduling.oss-cn-hangzhou.aliyuncs.com/profile/personinfo/2023/6/20/lang7_a953852ebaf143d2994fe879e106efda.png');
    background-repeat: no-repeat;
    background-position-x: center;
    box-sizing: border-box;

    .img {
      width: 0.16rem;
      height: 0.14rem;
      margin-left: 0.1rem;
      margin-right: 0.15rem;
    }

    .img1 {
      width: 0.36rem;
      height: 0.16rem;
      margin-right: 0.1rem;
    }
  }

  .box {
    .list {
      height: 0.5rem;
      line-height: 0.5rem;
      color: #00cdff;
      font-size: 0.2rem;
      margin: 0.1rem 0.2rem;

      .date {
        width: 1.8125rem;
      }

      .headline {
        width: 60%;
      }

      .but {
        width: 1.9rem;
        text-align: right;
        padding-right: 0.375rem;
      }
    }

    .notice-list {
      height: 2.8rem;
      overflow-y: auto;

      .ul {
        height: 0.5rem;
        line-height: 0.5rem;

        .date {
          width: 1.8125rem;
          margin-left: 0.2rem;
        }

        .headline {
          width: 60%;
        }

        .examine {
          text-align: right;
          color: #00cdff;
          width: 1.5rem;
        }
      }
    }
  }
}
</style>